<template>
  <div>
    <el-dialog
      top="8vh"
      width="90%"
      :title="title"
      :show-close="true"
      :lock-scroll="true"
      :visible.sync="data_visible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @closed="dialogDestroy"
    >
      <div class="main">
        <el-tabs v-if="type === 'surgery'" v-model="data_tabs_active_name" type="card">
          <el-tab-pane label="产品列表" name="product_list">
            <product-add-dialog-product-list-component
              :type="type"
              :query="query"
              :fetcher="fetcher"
              :store="store"
              @selectionChange="productListSelectionChange"
            />
          </el-tab-pane>
          <el-tab-pane label="订单模板" name="order_template">
            <product-add-dialog-order-template-component
              :query="query"
              :fetcher="fetcher"
              @selectionChange="orderTemplateSelectionChange"
            />
          </el-tab-pane>
        </el-tabs>
        <product-add-dialog-product-list-component
          v-if="type === 'default'"
          :type="type"
          :query="query"
          :fetcher="fetcher"
          :store="store"
          @selectionChange="productListSelectionChange"
        />
        <product-add-dialog-product-list-component
          v-if="type === 'consume'"
          :type="type"
          :query="query"
          :fetcher="fetcher"
          :store="store"
          @selectionChange="productListSelectionChange"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">
          取 消
        </el-button>
        <el-button type="primary" :disabled="getListSelected().length === 0" @click="dialogConfirm">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ApiMMallWeb } from '@services/api';
import ProductAddDialogProductListComponent from './product-add.dialog.product-list.component.vue';
import ProductAddDialogOrderTemplateComponent from './product-add.dialog.order-template.component.vue';

export default {
  name: 'ProductAddDialogComponent',
  components: { ProductAddDialogProductListComponent, ProductAddDialogOrderTemplateComponent },
  props: {
    type: {
      type: String,
      default: 'default'
    },
    title: {
      type: String,
      default: '添加产品'
    },
    query: {
      type: Object,
      default: function() {
        return {};
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    fetcher: {
      type: Function,
      default: function() {}
    },
    store: null
  },
  data() {
    return {
      data_visible: true,
      data_tabs_active_name: 'product_list',
      data_product_list_selected: [],
      data_order_template_selected: {}
    };
  },
  computed: {
    apiMMallWeb: function() {
      return new ApiMMallWeb(this.fetcher);
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler: function(val, oldVal) {
        this.data_visible = val;
      }
    }
  },
  methods: {
    dialogDestroy() {
      this.$emit('destroy', true);
      this.$emit('update:visible', false);
    },
    dialogClose() {
      this.data_visible = false;
    },
    productListSelectionChange(selectedData) {
      this.data_product_list_selected = selectedData;
    },
    orderTemplateSelectionChange(selectedData) {
      this.data_order_template_selected = selectedData;
    },
    getListSelected() {
      if (this.type === 'default') {
        return this.data_product_list_selected;
      } else if (this.type === 'surgery') {
        if (this.data_tabs_active_name === 'product_list') {
          return this.data_product_list_selected;
        } else if (this.data_tabs_active_name === 'order_template') {
          return this.data_order_template_selected;
        }
      }
      return [];
    },
    async dialogConfirm() {
      let result = this.getListSelected();
      if (this.type === 'surgery' && this.data_tabs_active_name === 'order_template') {
        result = await this.pullProductListData(this.data_order_template_selected.id);
      }
      this.$emit('confirm', result);
      this.data_visible = false;
    },
    pullProductListData(id) {
      return this.apiMMallWeb.OrderTemplateProductOrderV1ApiPOST({
        query: {
          templateId: id
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .el-tabs__header {
  margin-bottom: 50px;
}
.main {
  height: 500px;
  display: flex;
  flex: 1;
  div {
    display: flex;
    flex-direction: column;
  }
}
</style>
